<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 通配符  ----  匹配所有的标签 */
        * {
            margin: 0;
        }

        .a {
            width: 1000px;
            height: 100px;
            background-color: #eee;
            margin: auto;
        }

        .a1 {
            width: 252px;
            height: 53px;
            background-color: #0f0;
            float: left;
            margin-left: 20px;
            margin-top: 27px;
        }

        .a2 {
            width: 227px;
            height: 30px;
            background-color: #ddd;
            float: right;
            margin-right: 20px;
            margin-top: 30px;
        }



        .b {
            width: 1000px;
            height: 60px;
            background-color: #000;
            margin: auto;
        }

        .b1 {
            width: 119px;
            height: 60px;
            float: left;
        }

        .bb {
            margin-left: 20px;
        }


        .c {
            width: 1000px;
            height: 240px;
            background-color: pink;
            margin: auto;
        }

        .c1 {
            width: 500px;
            height: 240px;
            background-color: green;
            float: left;
        }

        .c1-1 {
            line-height: 64px;
            margin-top: 12px;
            margin-left: 22px;
        }

        .c1-2-1 {
            float: right;
            margin-right: 26px;
        }

        .c2 {
            width: 240px;
            height: 240px;
            background-color: rgb(58, 110, 153);
            float: left;
        }

        .c3 {
            width: 260px;
            height: 240px;
            background-color: green;
            float: left;
        }



        .d {
            width: 1000px;
            height: 306px;
            background-color: #ff0;
            margin: auto;
        }

        .d1 {
            /* width: 1000px;   可以继承d的宽度 */
            height: 54px;
            /* background-color: #f00; */
            margin-left: 22px;

            line-height: 54px;
            margin-top: 11px;
        }

        .d2 {
            height: 241px;
            background-color: #666;
        }

        .d2-1 {
            width: 210px;
            height: 241px;
            background-color: #eee;
            float: left;
            margin: 0 20px;
        }

        .d2-1-2 {
            line-height: 24px;
            font-size: 12px;
            margin-top: 12px;
        }
    </style>
</head>

<body>

    <!-- 
        很多标签都自带有外边距    * {margin:0;}

        可以给一个标签取多个名字   class="第一个名字 第二个名字 第三个名字 ...."

        样式和结构一样的时候，就可以使用列表

     -->

    <!-- 第一部分start -->
    <div class="a">
        <h1 class="a1"></h1>
        <div class="a2"></div>
    </div>
    <!-- 第一部分end -->



    <!-- 第二start -->
    <div class="b">
        <div class="b1 bb"></div>
        <div class="b1"></div>
        <div class="b1"></div>
        <div class="b1"></div>
        <div class="b1"></div>
        <div class="b1"></div>
        <div class="b1"></div>
        <div class="b1"></div>
    </div>
    <!-- 第二end -->

    <!-- 第三部分 -->
    <div class="c">
        <div class="c1">
            <h3 class="c1-1">白体</h3>
            <ul class="c1-2">
                <li>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊 <span class="c1-2-1">2022-22-22</span></li>
                <li>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊<span class="c1-2-1">2022-22-22</span></li>
                <li>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊 <span class="c1-2-1">2022-22-22</span></li>
                <li>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊 <span class="c1-2-1">2022-22-22</span></li>
                <li>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊 <span class="c1-2-1">2022-22-22</span></li>
                <li>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊 <span class="c1-2-1">2022-22-22</span></li>
            </ul>
        </div>
        <div class="c2">
            <h3>标题</h3>
            <p>少时诵诗书所所</p>
            <p>少时诵诗书所所</p>
            <p>少时诵诗书所所</p>
        </div>
        <div class="c3">
            <h3>标题</h3>
            <p>少时诵诗书所所</p>
            <p>少时诵诗书所所</p>
        </div>
    </div>


    <!-- 第四部分start -->
    <div class="d">
        <h2 class="d1">市场项目</h2>
        <dl class="d2">
            <dd class="d2-1">
                <img src="../images/1211.jpg" alt="" width="210" height="136">
                <p class="d2-1-2">啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p>
            </dd>
            <dd class="d2-1">
                <img src="../images/1211.jpg" alt="" width="210" height="136">
                <p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p>
            </dd>
            <dd class="d2-1">
                <img src="../images/1211.jpg" alt="" width="210" height="136">
                <p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p>
            </dd>
            <dd class="d2-1">
                <img src="../images/1211.jpg" alt="" width="210" height="136">
                <p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p>
            </dd>
        </dl>
    </div>
    <!-- 第四部分end -->

</body>

</html>